import React, { useState } from 'react';
import {DeleteOutlined, UserOutlined} from '@ant-design/icons';
import { message, Upload } from 'antd';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import st from './avatar-upload.module.css'
import {useAppDispatch, useAppSelector} from "../../../../redux/hooks";
import {getAvatar, saveAvatar} from "../../../../redux";
import ImgCrop from "antd-img-crop";


const getBase64 = (img: RcFile, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
};

const beforeUpload = (file: RcFile) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
};

const AvatarUpload: React.FC = () => {
    const [loading, setLoading] = useState(false);
    const imageUrl = useAppSelector(getAvatar);
    const dispatch = useAppDispatch();

    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj as RcFile, (url) => {
                setLoading(false);
                // setImageUrl(url);
                dispatch(saveAvatar(url))
            });
        }
    };
    function customReq(option: any) {
        option.onSuccess()
    }


    const [isEnter, setIsEnter] = useState(false)

    const modal = (
        isEnter ?
            <div style={{width: '100%',
                height: '100%',
                background: 'rgba(0, 0, 0, .3)',
                position: 'absolute',
                left: 0, top: 0, display: 'flex',
                transition: '.5s',
                alignItems:'center', justifyContent: 'center'
            }}>
                <DeleteOutlined style={{fontSize: 20, color: '#fff'}} onClick={(e) => {
                    e.stopPropagation()
                    dispatch(saveAvatar(''))
                }} />
            </div>
            : null
    )

return (
        <>
            <ImgCrop
                aspect={2.5 / 3.5}
                modalOk={'确定'}
                modalCancel={'取消'}
            >
            <Upload
                name="avatar"
                listType="picture-card"
                className={st['avatar-uploader']}
                showUploadList={false}
                customRequest={customReq}
                beforeUpload={beforeUpload}
                onChange={handleChange}
            >
                {
                   !imageUrl ?
                           <UserOutlined
                               style={{fontSize: 100, color: 'var(--main-color)'}} />
                       : null
                }
            </Upload>
            </ImgCrop>
            { imageUrl ?
                <div style={{position: 'relative', width: 145, height: 202}}
                     onMouseEnter={() => {
                         setIsEnter(true)
                     } }
                     onMouseLeave={() => {
                         setIsEnter(false)
                     }}
                >
                    <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
                    {modal}
                </div>
                :
                null
            }
        </>
);
};

export default AvatarUpload;
